body {
    background-color: #eaf2f8; /* achtergrond kleur van de hele pagina */
}


/* ===== TITEL (h1 met class="border") ===== */
h1.border {
    text-align: center;                 /* tekst in het midden */
    background-color: rgb(190, 193, 195); /* grijze achtergrond */
    border: 2px solid black;            /* zwarte rand van 2px */
    border-radius: 10px;                /* afgeronde hoeken */
    padding: 20px;                      /* ruimte BINNEN het vak, tussen tekst en rand */
    width: 300px;                       /* vaste breedte */
    margin: 10px auto;                  /* 10px ruimte boven/onder; auto links/rechts = vak horizontaal centreren */
}


/* ===== NAVIGATIEMENU ===== */
nav ul {
    list-style: none;         /* haalt de bolletjes van de lijst weg */
    display: flex;            /* zet de li-items naast elkaar in plaats van onder elkaar */
    justify-content: center;  /* items in het midden van de pagina */
    gap: 10px;                /* ruimte tussen de items */
}

nav li {
    text-align: center;                  /* tekst gecentreerd in elk knopvak */
    border: 2px solid black;             /* zwarte rand */
    border-radius: 5px;                  /* licht afgeronde hoeken */
    padding: 10px;                       /* ruimte binnen elk menu-item */
    width: 150px;                        /* elk item even breed */
    background-color: rgb(190, 193, 195); /* achtergrond kleur van elke item  */
}


/* ===== LOGO (rechtsboven) ===== */
.logo {
    position: absolute;  /* haalt het logo uit de normale volgorde;  */
    top: 0px;            /* helemaal bovenaan */
    right: 10px;         /* 10px van de rechterkant */
    width: 150px;        /* breedte van het logo */
    height: auto;        /* hoogte past zich aan zodat de verhouding klopt */
}


/* ===== FOTO LINKS ===== */
.foto {
    position: absolute;       /* vrij positioneren op de pagina */
    top: 270px;               /* afstand vanaf de bovenkant */
    left: 120px;              /* afstand vanaf de linkerkant */
    width: 350px;
    height: auto;             /* verhouding behouden */
    border: 4px solid black;  /* dikke zwarte rand */
    border-radius: 10px;      /* afgeronde hoeken */
}


/* ===== FOTO RECHTS (stadskasteel) ===== */
.stadskasteel {
    position: absolute;
    top: 200px;               /* afstand vanaf de bovenkant */
    right: 120px;             /* afstand vanaf de rechterkant */
    width: 300px;
    height: auto;
    border: 4px solid black;
    border-radius: 10px;
}


/* ===== TEKSTVAK (grijs vak met tekst) ===== */
.tekstvak {
    text-align: center;
    background-color: rgb(190, 193, 195);
    border: solid rgb(0, 0, 0);  /* zwarte rand; er staat geen dikte bij, dus de browser kiest "medium" */
    border-radius: 10px;
    padding: 20px;
    width: 450px;
    margin: 10px auto;           /* gecentreerd op de pagina */
}


/* ===== SECTION (indeling van de pagina) ===== */
section {
    display: flex;                  /* kinderen naast elkaar zetten */
    justify-content: space-around;  /* gelijke ruimte rondom de kinderen */
    align-items: flex-start;        /* bovenaan uitlijnen */
    gap: 40px;                      /* ruimte tussen  */
    margin-top: 25px;               /* ruimte boven de section */
    padding: 0 40px;                
}


section section {
    flex-direction: column;  /* flex-richting wordt verticaal (onder elkaar) */
}


/* ===== AFBEELDINGEN IN EEN ARTICLE ===== */
article img {
    border: 3px solid black;
    width: 375px;
    height: 350px;            /* vaste hoogte (kan de foto uitrekken) */
    display: block;           /* afbeelding wordt een blok, dus tekst komt eronder */
    margin-bottom: 20px;      /* ruimte onder de foto */
    margin-right: 100px;      /* ruimte rechts van de foto */
    border-radius: 10px;
}


/* ===== GRIJS VAK (met h2 en p) ===== */
.grijsvak {
    display: block;
    border: 2px solid black;
    padding: 10px;
    background-color: rgb(190, 193, 195);
    text-align: center;
    border-radius: 10px;
    width: 400px;
}

.grijsvak h2 {
    margin-top: 0;        /* geen extra ruimte boven de kop */
    text-align: center;
}

.grijsvak p {
    margin-bottom: 0;     /* geen extra ruimte onder de alinea */
    text-align: center;
}


/* ===== TEKST OP DE INDEXPAGINA ===== */
.tekstindex {
    justify-content: center;  /* inhoud in het midden  */
    display: flex;
    padding: 5px;
    margin-top: -5px;         /*  schuift het vak 5px omhoog */
    text-align: center;
    width: 450px;
}


/* ===== ELEMENT MET id="grijsvak2" (# = id, uniek op de pagina) ===== */
#grijsvak2 {
    border: 2px solid black;
    background-color: rgb(190, 193, 195);
    text-align: center;
    border-radius: 10px;
}


/* ===== VOETTEKST ===== */
footer {
    margin-top: 50px;         /* ruimte tussen de main en de footer */
    border: 2px solid black;
    background-color: rgb(190, 193, 195);
    text-align: center;
    border-radius: 10px;
}